<template>
    <div>
      <div><button @click="change">gaibian</button></div>
  <div>{{state}}</div>
  <div>{{obj.bar}}</div>
      
    </div>
  
  </template>
  
  
  <script setup lang="ts">
  import { reactive, toRef } from 'vue';
  
  const obj = reactive({
    foo:1,
    bar:1
  })
  
  const state = toRef(obj,'bar') //一个属性变成响应式
  
  const change=()=>{
    state.value++
    obj.bar++
  
    console.log('---->原始对象',obj)
  
    console.log('----->引用对象',state)
  }
  
  
  </script>
  
  <style>
  
  
  </style>